<template>
  <div id="chat-app">
    <div class="chat-container" ref="chatContainer">
      <!-- Chat messages -->
      <div v-for="(message, index) in messages" :key="index" :class="message.sender">
        <div v-html="message.content"></div>
      </div>
    </div>

    <!-- User input and send button -->
    <div class="input-area">
      <input type="text" v-model="userInput" placeholder="Type your message..." @keyup.enter="sendMessage" />
      <button @click="sendMessage">Send</button>
    </div>
  </div>
</template>

<script>
import { ref, nextTick } from 'vue';
import { marked } from 'marked';

export default {
  name: 'ChatComponent',
  setup() {
    const userInput = ref('hi'); // User input for the message
    const messages = ref([]); // Array to store the messages
    const chatContainer = ref(null); // Reference to the chat container for auto-scrolling

    // Function to send the message
    const sendMessage = async () => {
      const input = userInput.value.trim();
      if (input !== '') {
        // Add the user's message to the chat
        messages.value.push({ sender: 'user', content: input });

        // Clear the input field
        userInput.value = '';

        try {
          const axios = require('axios');
          const requestUrl = `http://localhost:8082/getChatResponse?content=${encodeURIComponent(input)}`
          axios.get(requestUrl)
            .then(response => {
              const { data } = response;
              console.log(data)
              console.log(marked)

              const afterMarkedData = marked.parse((data));

              // Add the bot's response to the chat
              messages.value.push({ sender: 'bot', content: afterMarkedData });
              // scrollToBottom();
            })
            .catch(error => console.error('Error:', error));
          
        } catch (error) {
          console.error('Error:', error);
          messages.value.push({ sender: 'bot', content: 'Sorry, there was an error processing your request.' });
        }
      }
    };

    // Function to auto-scroll to the bottom of the chat
    const scrollToBottom = () => {
      nextTick(() => {
        chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
      });
    };

    return {
      userInput,
      messages,
      sendMessage,
      scrollToBottom,
      chatContainer,
    };
  },
};
</script>

<style scoped>
#chat-app {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.chat-container {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.user {
  text-align: right;
  color: blue;
  margin-bottom: 5px;
}

.bot {
  text-align: left;
  color: green;
  margin-bottom: 5px;
}

.input-area {
  display: flex;
  margin-top: 10px;
}

input[type="text"] {
  width: 80%;
  padding: 10px;
  margin-right: 10px;
}

button {
  padding: 10px 20px;
  cursor: pointer;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
}

button:hover {
  background-color: #45a049;
}
</style>
